<template>
    <div class="scroll-container">
            <!-- 包裹滚动区域，蒙层不能一起滚 -->
       
                <div class="target-center"></div>
                <div class="mask"></div>
                <div class="wrapper" ref="oWrapper"
                @scrollend="handleScrollEnd"
                >
                  <div class="scroll-wrapper">
                  <list-item></list-item>
                  <list-item></list-item>
             
                    <slot></slot>
               
                  <list-item></list-item>
                  <list-item></list-item>
                </div>

                </div>
            </div>
     
</template>
<script setup lang="ts">
import { inject,onMounted,ref } from 'vue';
import ListItem from './ListItem.vue'
import {DateMark, IInjection, IScrollContainerProps} from './types.ts'

const oWrapper = ref<HTMLDivElement>()
const props = defineProps<IScrollContainerProps>()
const emit =defineEmits([
  'setYear', 'setMonth', 'setDay'
])

const {currentDate,years,months,days} = inject('provideData') as IInjection;

onMounted(() => {
  initCurrentDate()
})
function handleScrollEnd() {
  const index = oWrapper.value!.scrollTop/50;
  switch (props.field) {
    case DateMark.YEAR:
     emit ('setYear',index)
      break;
    case DateMark.MONTH:
     emit( 'setMonth',index)
      break;
    case DateMark.DAY:
    emit('setDay',index)
      break;
    default:
      break;
  }
}
function initCurrentDate() {
  let index=0;

  switch (props.field) {
    case DateMark.YEAR:
      index = years.indexOf(currentDate[0]);
      break;
    case DateMark.MONTH:
      index = months.indexOf(currentDate[1]);
      break;
    case DateMark.DAY:
      index = days.indexOf(currentDate[2]);
      break;
    default:
      break;
  }
  setScroll(index);
}
function setScroll(index: number) {
  oWrapper.value!.scrollTo(0,index * 50);
}

</script>